<template>
  <!-- 这是上面图表二的 -->
  <div id="mainMap" style="height: 100%; width: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import tcJson from "../../../assets/map.json";

export default {
  data() {
    return {
      bigDataList: [],
      chart: null, // 添加此行保存图表实例
    };
  },
  mounted() {
    this.chart = this.getEcharts(); // 更新此处获取图表实例
    window.addEventListener('resize', this.handleResize); // 添加监听器
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize); // 移除监听器
  },
  methods: {
    getEcharts() {
      const charEle = document.getElementById("mainMap");
      const charEch = echarts.init(charEle);

      // 检查地图是否已经注册
      if (!echarts.getMap("map")) {
        echarts.registerMap("map", { geoJSON: tcJson });
      }

      const options = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params, "vvvvvvvvvvvv");
            return `${params.data.name}: ${params.value || "-"}`;
          },
        },
        grid: {
          left: "0px",
          right: "0px",
          bottom: "0px",
        },
        geo: {
          map: "map",
          zoom: 1.40,
          scaleLimit: {
            min: 1,
          },
          label: {
            color: "#fff",
            show: true,
          },
          top: '16%',
          emphasis: {
            label: {
              color: "#fff",
              show: true,
            },
            itemStyle: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#073684",
                  },
                  {
                    offset: 1,
                    color: "#2B91B7",
                  },
                ],
              },
            },
          },
          roam: false,
          itemStyle: {
            areaColor: "rgba(0, 0, 0, 0)",
            borderColor: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#00F6FF",
                },
                {
                  offset: 1,
                  color: "#87ADCB",
                },
              ],
              false
            ),
            shadowColor: "rgba(10,76,139,1)",
            shadowOffsetY: 0,
            shadowBlur: 60,
            borderWidth: 1,
          },
          viewControl: {
            distance: 100,
            alpha: 30,
            beta: 0,
          },
        },
        series: [
          {
            name: "太仓地图",
            type: "map",
            map: "map",
            geoIndex: 0,
            data: [
              { name: "璜泾镇", value: 100 },
              { name: "浮桥镇", value: 200 },
              { name: "浏河镇", value: 300 },
              { name: "双凤镇", value: 300 },
              { name: "沙溪镇", value: 300 },
              { name: "城厢镇", value: 300 },
              { name: "开发区", value: 300 },
              { name: "新城区", value: 300 },
            ],
          },
        ],
      };
      charEch.setOption(options);
      return charEch;
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
};
</script>

<style scoped>
/* 根据需要添加样式 */
#mainMap {
  height: 100%;
  width: 100%;
}
</style>